<template>
  <div class="area-platform-analysis" :loading="loading">
    <div class="query-header">
      <a-form
        :model="queryParam"
        :label-col="{
          style: { width: '70px' },
        }"
        :wrapper-col="{
          style: { width: '150px' },
        }"
      >
        <div class="query-header-div">
          <a-form-item label="保险公司" style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.company" dictCode="BXGS" placeholder="请选择保险公司" />
          </a-form-item>
          <a-form-item label="出保状态" style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.policyState" dictCode="DZBDZT" placeholder="请选择出保状态" />
          </a-form-item>
          <a-form-item label="保险代理"  style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.platform" dictCode="BXDL" placeholder="请选择保险公司" :disabled="disabled"/>
          </a-form-item>

          <div class="date-group">
            <a @click="queryDay" class="date-btn">当日</a>
            <a @click="queryMouth" class="date-btn">本月</a>
            <a @click="queryYear" class="date-btn">本年度</a>
            <a-range-picker :style="{ width: '256px' }" v-model:value="queryParam.timeRange" />
          </div>
        </div>
      </a-form>
    </div>
    <Card :tab-list="tabListRank" class="analysis-card-tabs" v-bind="$attrs" :active-tab-key="activeRankKey" @tabChange="onTabChange">
      <div v-if="activeRankKey === 'tab1'" class="area-analysis">
        <AnalysisRank :columns="rankAreaColumns" :data="data.areaInfo" />
        <AnalysisPie width="45%" title="地区保费占比" :data="data.areaInfo" />
      </div>
      <div v-if="activeRankKey === 'tab2'" class="area-analysis">
        <AnalysisRank :columns="rankPlatformColumns" :data="data.platformInfo" />
        <AnalysisPie width="45%" title="平台保费占比" :data="data.platformInfo" />
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { dateFormat } from '/@/utils/common/compUtils';
  import AnalysisRank from './AnalysisRank.vue';
  import AnalysisPie from './AnalysisPie.vue';
  import { getRankAndProportion } from '../indexInsurance.api';

  import dayjs from 'dayjs';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  const activeRankKey = ref('tab1');
  const loading = ref(true);
  const queryParam = ref<any>({});
  const data = ref<any>({
    areaInfo: [],
    platformInfo: [],
  });

  const rankAreaColumns = [
    {
      title: '排名',
      dataIndex: 'rankname',
      key: 'rankname',
    },
    {
      title: '地区',
      dataIndex: 'tag',
      key: 'tag',
    },
    {
      title: '保费',
      dataIndex: 'amt',
      key: 'amt',
    },
    {
      title: '占比',
      dataIndex: 'rank',
      key: 'rank',
      customRender: ({ value }) => {
        return value ? `${(value).toFixed(2)}%` : 0;
      },
    },
  ];
  const rankPlatformColumns = [
    {
      title: '排名',
      dataIndex: 'rankname',
      key: 'rankname',
    },
    {
      title: '平台',
      dataIndex: 'tag',
      key: 'tag',
    },
    {
      title: '保费',
      dataIndex: 'amt',
      key: 'amt',
    },
    {
      title: '占比',
      dataIndex: 'rank',
      key: 'rank',
      customRender: ({ value }) => {
        return value ? `${(value).toFixed(2)}%` : 0;
      },
    },
  ];

  const tabListRank = [
    {
      key: 'tab1',
      tab: '地区保费',
    },
    {
      key: 'tab2',
      tab: '平台保费',
    },
  ];
  onMounted(() => {
    queryMouth();
  });

  function onTabChange(key) {
    activeRankKey.value = key;
  }
  function queryDay() {
    const payBegin = dayjs();
    const payEnd = dayjs();
    queryParam.value.timeRange = [payBegin, payEnd];
  }
  function queryMouth() {
    const payBegin = dayjs().startOf('month');
    const payEnd = dayjs().endOf('month');
    queryParam.value.timeRange = [payBegin, payEnd];
  }

  function queryYear() {
    const payBegin = dayjs().startOf('year');
    const payEnd = dayjs().endOf('year');
    queryParam.value.timeRange = [payBegin, payEnd];
  }

  watch(
    () => queryParam,
    () => {
      reload();
    },
    {
      immediate: true,
      deep: true,
    }
  );
  function reload() {
    const params: any = {};
    if (queryParam.value.company) {
      params.insuranceCompany = queryParam.value.company;
    }
    if (queryParam.value.policyState) {
      params.policyState = queryParam.value.policyState;
    }
    if (queryParam.value.platform) {
      params.platform = queryParam.value.platform;
    }
    if (queryParam.value.timeRange) {
      const format = 'yyyy-MM-dd';
      const begin = dateFormat(queryParam.value.timeRange[0], format);
      const end = dateFormat(queryParam.value.timeRange[1], format);
      params.startDate = begin;
      params.endDate = end;
    } else {
      return;
    }
    console.log('area-platform-reload', params);
    loading.value = true;
    getRankAndProportion(params)
      .then((res) => {
        const { areaInfo, platformInfo } = res;
        const areaList = areaInfo.map((item: any, index: number) => {
          item.rankname = index + 1;
          return item;
        });
        const platformList = platformInfo.map((item: any, index: number) => {
          item.rankname = index + 1;
          return item;
        });
        data.value.areaInfo = areaList;
        data.value.platformInfo = platformList;
        // data.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }
</script>
<style lang="less" scoped>
  .analysis-card-tabs {
    border: none !important;
  }
  .area-platform-analysis {
    margin: 10px;
    padding: 16px 16px 0px 16px;
    background: #fff;
  }
  .query-header {
    margin-bottom: 10px;
    .query-header-div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .date-group {
      display: flex;
      align-items: center;
      .date-btn {
        margin-right: 10px;
      }
    }
    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 180px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
  .area-analysis {
    display: flex;
    justify-content: space-between;
  }
</style>
